<script lang="ts" setup>
import { onMounted, ref, type Ref } from 'vue';

let currentTime: Ref<string> = ref('')

onMounted(() => {
    setInterval(() => {
        const date = new Date();
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const hour = date.getHours();
        let minute: any = date.getMinutes()
        minute = minute < 10 ? '0' + date.getMinutes() : date.getMinutes();
        let second: any = date.getSeconds();
        second = second < 10 ? '0' + date.getSeconds() : date.getSeconds();
        currentTime.value = `${year}年${month}月${day}日   ${hour}:${minute}:${second}`;
        // console.log(currentTime.value);
    }, 1000);
})
import { useRouter } from 'vue-router';
const router =useRouter();
import { useUserStore } from '../stores/login'
const user=useUserStore()


function logOut(){
//退出登录
 user.changeUserState({
    token: '',
    username: '',
    isLogin: false
  })
  router.push('/login') 

}



</script>



<template>
    <div class="header">
        <div class="left">
            <span> <el-image style="position: relative;top: 10px;"
                    src="https://img.axureshop.com/c9/57/1d/c9571de2aa7c47d2865ef6311a990b6a/images/%E6%99%BA%E6%85%A7%E6%B0%B4%E5%8A%A1/u148.png?token=868e9d768e91ffcb13ec5628d718c3361011b3a22c7c1c578d3658346173b1f7"></el-image>
                <el-image style="width: 42px;height: 26px; position: relative; left: -45px;"
                    src="https://img.axureshop.com/c9/57/1d/c9571de2aa7c47d2865ef6311a990b6a/images/%E6%99%BA%E6%85%A7%E6%B0%B4%E5%8A%A1/u149.gif"></el-image></span>
            <span style="color: #999;font-size: 14px; position: relative;right: 30px;">指挥调度中心</span>

            <span style="color: #999;font-size: 16px; margin-left: 20px;">{{ currentTime }}</span>
        </div>

        <div class="right">
            <input type="text" placeholder="模糊查询" style="margin-right: 50px;">
            <span>{{user.username}} <span><el-button @click="logOut">退出登录</el-button></span></span>
        </div>
    </div>
</template>


<style lang="scss" scoped>
.header {
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
        margin-bottom: 20px;
    }

    .right {
        input {
            width: 200px;
            height: 35px;
            border-radius: 35px;
            border: 1px solid #999;
            padding-left: 30px;
        }

        input:focus {
            outline: none;
            border: 2px solid #4A90E2;
        }
    }
}
</style>